<template>
    <div id="user">
        <!--搜索-->
        <div class="search-content">
            <el-input v-model="queryData.userName" placeholder="请输入用户名查询" prefix-icon="el-icon-search" clearable
                      @change="inquiryList"/>
            <el-input v-model="queryData.name" placeholder="请输入昵称查询" prefix-icon="el-icon-search" clearable
                      @change="inquiryList"/>
            <el-select v-model="queryData.sex" clearable placeholder="请选择性别" @change="inquiryList">
                <el-option
                        v-for="item in sexList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="queryData.agent" filterable clearable placeholder="请选择关联代理" @change="inquiryList">
                <el-option
                        v-for="item in agentList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="queryData.grade" clearable placeholder="请选择会员等级" @change="inquiryList">
                <el-option
                        v-for="item in gradeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="queryData.internal" clearable placeholder="请选择是否为内部会员" @change="inquiryList">
                <el-option
                        v-for="item in internalList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="queryData.isOnLine" clearable placeholder="请选择是否在线" @change="inquiryList">
                <el-option
                        v-for="item in isOnLineList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-select v-model="queryData.isExamine" clearable placeholder="请选择是否通过审核" @change="inquiryList">
                <el-option
                        v-for="item in isExamineList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-date-picker
                    align="left"
                    v-model="queryData.dateTimeRange"
                    type="datetimerange"
                    range-separator="至"
                    clearable
                    value-format="yyyy-MM-dd HH-mm-ss"
                    @change="inquiryList"
                    :picker-options="pickerOptions"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
        </div>
        <!--操作列表-->
        <div class="table">
            <el-table fit :data="tableData" style="width: 100%">
                <el-table-column label="用户名" prop="userName" align="center"/>
                <el-table-column label="昵称" prop="name" align="center"/>
                <el-table-column label="年龄" prop="age" align="center"/>
                <el-table-column label="性别" prop="sex" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.sex==='woman'?'女':'男'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="用户头像" prop="httpAvatar" align="center">
                    <template slot-scope="scope">
                        <img v-if='scope.row.httpAvatar' width="50" height='50' :src="scope.row.httpAvatar" alt="头像有误"/>
                        <span v-else></span>
                    </template>
                </el-table-column>
                <el-table-column label="会员等级" prop="grade" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.grade==='ordinary'" type="info">普通用户</el-tag>
                        <el-tag size="small" v-if="scope.row.grade==='blueDiamond'">蓝钻VIP</el-tag>
                        <el-tag size="small" v-if="scope.row.grade==='anCrown'" type="warning">皇冠VIP</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="内部会员" prop="internal" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.internal?'是':'否'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="金币数量" prop="gold" align="center"/>
                <el-table-column label="是否在线" prop="isOnLine" align="center">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.isOnLine" type="success">在线</el-tag>
                        <el-tag size="small" v-else type="info">离线</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createDate" width="170" align="center"/>
                <el-table-column label="上次登录时间" prop="loginDate" width="170" align="center"/>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="dealwithView(scope.$index, scope.row)">详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="pagination">
                <el-pagination
                        :current-page.sync="queryData.currentPage"
                        :page-sizes="[10,20,30,40,50]"
                        layout="total,sizes, prev, pager, next"
                        :total="queryData.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
</template>

<script>
    import request from "../../utils/request";

    export default {
        name: "usersetting",
        data() {
            return {
                // 缓存名称
                querySessionKey: "usersettingQuerySession",
                // 查询
                queryData: {
                    userName: "",
                    name: "",
                    sex: "",
                    agent: null,
                    grade: null,
                    internal: null,
                    isOnLine: null,
                    isExamine: null,
                    dateTimeRange: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
              pickerOptions: {
                shortcuts: [
                  {
                    text: '今天',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0);
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '昨天',
                    onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24);
                      let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                      let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '前天',
                    onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24* 2);
                      let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                      let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '本月',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '上月',
                    onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                      let start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                      let end = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 23, 59, 59);
                      end.setTime(end.getTime() - 3600 * 24 * 1000);
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '最近一周',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '最近一个月',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                      picker.$emit('pick', [start, end]);
                    }
                  },
                  {
                    text: '最近三个月',
                    onClick(picker) {
                      const end = new Date();
                      const start = new Date();
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                      picker.$emit('pick', [start, end]);
                    }
                  }
                ]
              },
                sexList: [
                    {
                        value: 0,
                        label: '男'
                    },
                    {
                        value: 1,
                        label: '女'
                    }
                ],
                agentList: [],
                gradeList: [
                    {
                        value: 0,
                        label: '普通用户'
                    },
                    {
                        value: 1,
                        label: '蓝钻VIP'
                    },
                    {
                        value: 2,
                        label: '皇冠VIP'
                    }
                ],
                internalList: [
                    {
                        value: 0,
                        label: '否'
                    },
                    {
                        value: 1,
                        label: '是'
                    }
                ],
                isOnLineList: [
                    {
                        value: '0',
                        label: '离线'
                    },
                    {
                        value: '1',
                        label: '在线'
                    }
                ],
                isExamineList: [
                    {
                        value: '0',
                        label: '否'
                    },
                    {
                        value: '1',
                        label: '是'
                    }
                ],
                isClearable: true,
                // 列表数据
                tableData: [],
                //分页
                currentPage: 1,
                pageSize: 10,
                total: 0
            }
        },
        mounted() {
            this.cacheInit();
            this.inquiryList();
            this.inquiryAgentList();
        },
        methods: {
            cacheInit() {
                let from = sessionStorage.getItem("fromUrl");
                let str = sessionStorage.getItem(this.querySessionKey);
                if ((from === '/userDetail' || from === '/') && str != null) {
                    try {
                        this.queryData = JSON.parse(str);
                    } catch (e) {
                        console.log("从缓存中取出查询条件出错：" + str)
                    }
                }
            },
            isNotNull(value) {
                return value !== null && value !== undefined && value !== "";
            },
            //查询代理列表
            inquiryAgentList() {
                let that = this;
                request({
                    method: 'get',
                    url: 'admin/agent/all/select'
                }).then(function (res) {
                    if (res.code === 200) {
                        if (res.data.length > 0) {
                            for (let i = 0; i < res.data.length; i++) {
                                that.agentList.push({
                                    label: res.data[i].name,
                                    value: res.data[i].id
                                })
                            }
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            },
            //查询列表
            inquiryList() {
                let that = this;
                let queryData = this.queryData;
                sessionStorage.setItem(this.querySessionKey, JSON.stringify(queryData));
                that.tableData = [];
                let data = {
                    pageNumber: queryData.currentPage,
                    pageSize: queryData.pageSize,
                    filters: []
                };
                if (this.isNotNull(queryData.userName)) { //用户名
                    data.filters.push({
                        property: "user_name",
                        value: queryData.userName,
                        operator: "like"
                    })
                }
                if (this.isNotNull(queryData.name)) { //昵称
                    data.filters.push({
                        property: "name",
                        value: queryData.name,
                        operator: "like"
                    })
                }
                if (this.isNotNull(queryData.sex)) { //性别
                    data.filters.push({
                        property: "sex",
                        value: queryData.sex,
                        operator: "eq"
                    })
                }
                if (this.isNotNull(queryData.agent)) { //关联代理
                    data.filters.push({
                        property: "agent_id",
                        value: queryData.agent,
                        operator: "eq"
                    })
                }
                if (this.isNotNull(queryData.grade)) { //会员等级
                    data.filters.push({
                        property: "grade",
                        value: queryData.grade,
                        operator: "eq"
                    })
                }
                if (this.isNotNull(queryData.internal)) { //是否为内部会员
                    data.filters.push({
                        property: "internal",
                        value: queryData.internal,
                        operator: "eq"
                    })
                }
                if (this.isNotNull(queryData.isOnLine)) { //是否在线
                    data.filters.push({
                        property: "is_onLine",
                        value: queryData.isOnLine,
                        operator: "eq"
                    })
                }
                if (this.isNotNull(queryData.isExamine)) { //是否通过审核
                    data.filters.push({
                        property: "examine",
                        value: queryData.isExamine,
                        operator: "eq"
                    })
                }
                if (this.isNotNull(queryData.dateTimeRange)) { //创建时间
                    data.filters.push({
                        property: "create_date",
                        value: queryData.dateTimeRange[0],
                        operator: "ge"
                    });
                    data.filters.push({
                        property: "create_date",
                        value: queryData.dateTimeRange[1],
                        operator: "le"
                    })
                }
                request({
                    method: 'post',
                    url: 'admin/member/list',
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8'
                    },
                    data: data
                }).then(function (res) {
                    if (res.code === 200) {
                        that.queryData.total = res.data.total;
                        let arr = res.data.records;
                        if (arr.length === 0) {
                            that.tableData = [];
                        } else {
                            that.tableData = arr
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //查看详情
            dealwithView(index, row) {
                this.$router.push({path: '/userDetail', query: {id: row.id}})
            },
            // 改变每页显示的数量
            handleSizeChange(val) {
                this.queryData.pageSize = val;
                this.inquiryList();
            },
            //改变当前页
            handleCurrentChange(val) {
                this.queryData.currentPage = val;
                this.inquiryList();
            }
        }
    }
</script>

<style src="../../assets/css/userManagement/userSetting.css">

</style>
